define([
    "ngController"
],function (appAngular) {

    // 底部按钮先关-可拖动模块-12、设置
    appAngular.directive("bimApiModelSetting", function () {
        return {
            restrict: "EA",
            replace: true,
            template: `<div class="draggable model-setting" ng-if="btnsSelect.name=='setting'&&btnsSelect.check == true">
						<div class="setting-header">
							<h3>设置</h3>
							<img ng-src="{{baseUrl + imgDragClose}}" ng-click="modelDragTitleClose()">
						</div>
						<div class="model-setting-content">
							<div class="model-setting-content-header">
								<button class="{{modelSetting.setting=='setComponent'?'setting-button-active':null}}" 
									ng-click="modelSettingTitleSelect('setComponent')">构建设置</button>
								<button class="{{modelSetting.setting=='setGlobal'?'setting-button-active':null}}" 
									ng-click="modelSettingTitleSelect('setGlobal')">全局设置</button>
							</div>
							<div class="model-setting-content-setComponent" ng-if="modelSetting.setting=='setComponent'">
								<div class="setting-every">
									<span>隔离:</span>
									<input class="switch-btn switch-btn-animbg" type="checkbox" 
									    ng-model="modelSetting.setComponent.isolation">
								</div>
								<div class="setting-every">
									<span>显示:</span>
									<input class="switch-btn switch-btn-animbg" type="checkbox" 
									    ng-model="modelSetting.setComponent.show">
								</div>
								<div class="setting-every">
									<span>闪烁:</span>
									<input class="switch-btn switch-btn-animbg" type="checkbox" 
									    ng-model="modelSetting.setComponent.glitter">
								</div>
								<div class="setting-every">
									<span>线框:</span>
									<input class="switch-btn switch-btn-animbg" type="checkbox" 
									    ng-model="modelSetting.setComponent.box">
								</div>
								<div class="setting-every">
									<span>区域图层:</span>
									<input class="switch-btn switch-btn-animbg" type="checkbox" 
									    ng-model="modelSetting.setComponent.areaCoverage">
								</div>
								<div class="setting-every setting-every-last">
									<span>透明度:</span>
									<input type="range" min="0" max="100" step="1" 
									    ng-model="modelSetting.setComponent.opacity">
									<span>{{modelSetting.setComponent.opacity}}%</span>
								</div>
								<div class="setting-btn">
									<button ng-click="modelSettingsetComponentReset()">恢复默认设置</button>
								</div>
							</div>
							<div class="model-setting-content-setGlobal" ng-if="modelSetting.setting=='setGlobal'">
								<div class="setting-every">
									<span>全屏:</span>
									<input class="switch-btn switch-btn-animbg" type="checkbox" 
									    ng-model="modelSetting.setGlobal.fullScreen">
								</div>
								<div class="setting-every">
									<span>鼠标习惯:</span>
									<div class="mouse-habit">
										<label>
				                    <input type="radio" value="left" name="mouseHabit"
				                           ng-model="modelSetting.setGlobal.mouseHabit"
				                           (change)="ModelSetMouseHabit()" checked>
				                    <span>左键旋转</span>
				                  </label>
										<label>
				                    <input type="radio" value="right" name="mouseHabit"
				                           ng-model="modelSetting.setGlobal.mouseHabit"
				                           (change)="ModelSetMouseHabit()">
				                    <span>右键旋转</span>
				                  </label>

									</div>
								</div>
								<div class="setting-every">
									<span>背景色:</span>
									<div class="bg-color">
										<label>
				                    <span></span>
				                  </label>
									</div>
									<div class="bg-color">
										<div ng-repeat="bgColor in modelSetting.setGlobal.bgColor" 
											class="bg-color-index {{modelSetting.setGlobal.colorIndex==bgColor?'bg-color-active':null}}" 
											ng-click="modelChooseColorIndex(modelSetting.setGlobal, bgColor)">
											<span style="background-color: {{bgColor}}"></span>
										</div>
									</div>
								</div>
								<div class="setting-every setting-every-last">
									<span>渲染帧率:</span>
									<input type="range" min="0" max="100" step="1" ng-model="modelSetting.setGlobal.renders">
									<span>{{modelSetting.setGlobal.renders}}%</span>
								</div>
								<div class="setting-btn setting-margin-top">
									<button ng-click="modelSettingsetGlobalReset()">恢复默认设置</button>
								</div>
							</div>
						</div>
					</div>`,
            link: function ($scope, $elem, attrs) {
                // 模型中-12-设置属性
                $scope.modelSetting = {
                    setting: "setComponent",
                    setComponent: {
                        isolation: false,
                        show: true,
                        glitter: false,
                        box: false,
                        areaCoverage: false,
                        opacity: 100
                    },
                    setGlobal: {
                        fullScreen: false,
                        mouseHabit: 'left',
                        bgColor: ['#f0f0f0', '#999999', '#4e6e8f', '#313e48', '#000000'],
                        colorIndex: '#313e48',
                        renders: 80
                    }
                };
                // 模型12、构件设置
                // 隔离
                $scope.$watch("modelSetting.setComponent.isolation", function (newValue, oldValue) {
                    newValue == true ? Model.quarantine() : Model.quarantine();
                }, true);
                // 显示
                $scope.$watch("modelSetting.setComponent.show", function (newValue, oldValue) {
                    newValue == true ? Model.showModel() : Model.showHideModel();
                }, true);
                // 闪烁
                $scope.$watch("modelSetting.setComponent.glitter", function (newValue, oldValue) {
                    newValue == true ? (Model.twinkle(Model.body.name, 500, function (twin) {
                        setTimeout(function () {
                            clearInterval(twin)
                        }, 5000)
                    }))() : "";
                }, true);
                // 线框
                $scope.$watch("modelSetting.setComponent.box", function (newValue, oldValue) {
                    newValue == true ? Model.frame() : Model.frame();
                }, true);
                // 透明度
                $scope.$watch("modelSetting.setComponent.opacity", function (newValue, oldValue) {
                    newValue !== oldValue ? Model.opacity(newValue / 100) : "";
                }, true);
                // 模型12、全局设置
                // 全屏
                $scope.$watch("modelSetting.setGlobal.fullScreen", function (newValue, oldValue) {
                    if (newValue) {
                        let element = $(".BIMView-API-content")[0];
                        if (element.requestFullscreen) {
                            element.requestFullscreen();
                        } else if (element.mozRequestFullScreen) {
                            element.mozRequestFullScreen();
                        } else if (element.webkitRequestFullscreen) {
                            element.webkitRequestFullscreen();
                        } else if (element.msRequestFullscreen) {
                            element.msRequestFullscreen();
                        }
                    } else {
                        if (document.exitFullscreen) {
                            document.exitFullscreen();
                        } else if (document.mozCancelFullScreen) {
                            document.mozCancelFullScreen();
                        } else if (document.webkitCancelFullScreen) {
                            document.webkitCancelFullScreen();
                        } else if (document.msExitFullscreen) {
                            document.msExitFullscreen();
                        }
                    }
                }, true);
                // 鼠标习惯
                $scope.$watch("modelSetting.setGlobal.mouseHabit", function (newValue, oldValue) {
                    if (newValue !== oldValue) {
                        newValue == "left" ? Model.changeHabit(0) : Model.changeHabit(2);
                    }
                    newValue.colorIndex !== oldValue.colorIndex ? Model.changeColor(newValue.colorIndex) : "";
                }, true);
                // 背景颜色
                $scope.$watch("modelSetting.setGlobal.colorIndex", function (newValue, oldValue) {
                    newValue !== oldValue ? Model.changeColor(newValue) : "";
                }, true);
            }

        };
    });

    return appAngular;
});